<template>
    <div class="login_box">
        <div class="login_logo">
            <img src="../assets/image/login/login_top_logo.png" alt="">
        </div>

        <div class="login_form">
            <div class="login_form_box">
                <div class="login_title">登 录</div>
                <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"
                            show-password></el-input>
                    </el-form-item>
                    <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
                    <div class="submit_btn">
                        <el-button type="primary" @click="submitForm('loginForm')">登 录</el-button>
                    </div>
                </el-form>
            </div>

        </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
import { encrypt, decrypt } from '@/utils/jsencrypt';
export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
                rememberMe: false
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getCookie();
    },
    methods: {
        getCookie() {
            const username = Cookies.get('username');
            const password = Cookies.get('password');
            const rememberMe = Cookies.get('rememberMe');
            if (username && password && rememberMe) {
                this.loginForm.username = username;
                this.loginForm.password = decrypt(password);
                this.loginForm.rememberMe = true;
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.loginForm.rememberMe) {
                        Cookies.set('username', this.loginForm.username, { expires: 7 });
                        Cookies.set('password', encrypt(this.loginForm.password), { expires: 7 });
                        Cookies.set('rememberMe', true, { expires: 7 });
                    } else {
                        Cookies.remove('username');
                        Cookies.remove('password');
                        Cookies.remove('rememberMe');
                    }
                    // 调用this.$store
                    this.$store.dispatch("Login", this.loginForm).then(({data: res}) => {
                        if(res.code == 1) {
                            this.$message.success("登录成功"); 
                            this.$store.commit("SET_TOKEN", res.data);
                            Cookies.set('token', res.data, { expires: 7 });
                            this.$router.push({
                                path: '/index'
                            });
                        } else {
                            this.$message.error(res.msg);
                        }
                    }).catch((err) => {
                        console.log(err, 'err');
                    });
                } else {
                    return false;
                }
            });
        }
    },
    mounted() {
    }
}
</script>

<style lang="scss" scoped>
.login_box {
    width: 100vw;
    height: 100vh;
    background: url(../assets/image/login/login_back.png) no-repeat center center;
    background-size: cover;
    position: relative;

    .login_logo {
        padding: 30px 30px;

    }

    .login_form {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-40%, -50%);
        width: 1274px;
        height: 486px;
        background: url(../assets/image/login/login_dialog.png) no-repeat center center;
        background-size: cover;

        .login_form_box {
            width: 50%;
            height: 100%;
            float: right;
            padding: 40px;
            padding-top: 100px;

            .login_title {
                font-size: 28px;
                text-align: center;
                font-weight: 700;
                color: blue;
                margin-bottom: 30px;
            }

            .submit_btn {

                text-align: center;
            }
        }
    }
}
</style>